<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
</head>

<body>
    <style>
        .show-plane {
            height: 322px;
            width: 1080px;
            margin: 10px;
            display: flex;
            flex-flow: row wrap;
            align-content: space-between;
            justify-content: space-between;
            align-items: flex-start;
        }

        .video {
            height: 145px;
            width: 250px;
            flex: none;
            position: relative;
        }

        img {
            height: 100%;
            width: 100%;

        }

        p {
            position: absolute;
            bottom: 0px;
            left: 20px;

            font-size: 18px;
            line-height: 18px;
            height: 18px;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 500;
        }
    </style>



    <div class="show-plane">
        <div class="video">
            <img src="/img/pic0001.webp" alt="图挂了" />
            <p>第一张图片</p>
        </div>
        <div class="video">
            <img src="/img/pic0002.webp" alt="图挂了" />
            <p>第二张图片</p>
        </div>
        <div class="video">
            <img src="/img/pic0003.webp" alt="图挂了" />
            <p>第三张图片</p>
        </div>
        <div class="video">
            <img src="/img/pic0004.webp" alt="图挂了" />
            <p>第四张图片</p>
        </div>
        <div class="video">
            <img src="/img/pic0005.webp" alt="图挂了" />
            <p>第五张图片</p>
        </div>
        <div class="video">
            <img src="/img/pic0006.webp" alt="图挂了" />
            <p>第六张图片</p>
        </div>
        <div class="video">
            <img src="/img/pic0007.webp" alt="图挂了" />
            <p>第七张图片</p>
        </div>
        <div class="video">
            <img src="/img/pic0008.webp" alt="图挂了" />
            <p>第八张图片</p>
        </div>
    </div>

</body>